import { DropdownItem, DropdownMenu } from '@antmjs/vantui'

import { useEffect, useState } from 'react'
import { getKindRootNodes } from '../api'

const resolveOptions = data => {
	return data.map(kind => ({ text: kind.name, value: kind.id }))
}
const KindSelect = ({ memberType, onChange, style }) => {
	const [options, setOptions] = useState([])
	const [innerValue, setInnerValue] = useState('')
	const generateOptions = async (params: any) => {
		const kinds = await getKindRootNodes(params)
		if (kinds.length) {
			setOptions(resolveOptions(kinds))
			setInnerValue(kinds[0].id)
		}
	}
	useEffect(() => {
		generateOptions({ memberType })
	}, [memberType])

	const handleKindChange = value => {
		setInnerValue(value)
		onChange && onChange(value)
	}

	return (
		<DropdownMenu style={style}>
			<DropdownItem
				options={options}
				value={innerValue}
				onChange={handleKindChange}
			/>
		</DropdownMenu>
	)
}
export default KindSelect
